<template>
  <div>
    <div class="lov">
      <div class="lovtop" @click="$router.push('/userInfo')">
        <img src="../../assets/Search/46.png" alt="" />
        <span>个人信息</span>
      </div>
    </div>
    <div class="lovcentr">
      <ul>
        <li>
          <div class="lovcentron">
            <span>name:</span>
            <span>{{ details.nickname }}</span>
          </div>
          <div class="lovcentrto">
            <img :src="details.avatarUrl" alt="" />
          </div>
        </li>
        <li>
          <div class="lovcentron">
            <span>云民生日:</span>
            <span>{{ detailsad.createDays | formatDate }}</span>
          </div>
          <div class="lovcentrto">
            <!-- <img :src="details.avatarUrl" alt="" /> -->
          </div>
        </li>
        <li>
          <div class="lovcentron">
            <span>听歌时长:</span>
            <span>{{ detailsad.listenSongs }}小时</span>
          </div>
          <div class="lovcentrto">
            <!-- <img :src="details.profile.avatarUrl" alt="" /> -->
          </div>
        </li>
        <!-- <li>
          <div class="lovcentron">
            <span>name:</span>
            <span>{{ details.profile.nickname }}</span>
          </div>
          <div class="lovcentrto">
            <img :src="details.profile.avatarUrl" alt="" />
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
import { getland } from "../../api/land";
export default {
  data() {
    return {
      lisid: "",
      details: [],
      detailsad: [],
    };
  },
  methods: {
    Fungetland() {
      getland({ uid: this.lisid }).then((data) => {
        if (data.code == 200) {
            this.detailsad = data;
          this.details = data.profile;
          console.log(this.details);
          console.log(this.detailsad);
        }
      });
    },
  },
  created() {
    setTimeout(() => {
      this.lisid = this.$route.query.id;
      console.log(this.lisid);
      this.Fungetland();
    }, 400);
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      // let h = date.getHours();
      // h = h < 10 ? "0" + h : h;
      // let m = date.getMinutes();
      // m = m < 10 ? "0" + m : m;
      // let s = date.getSeconds();
      // s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
      // return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
};
</script>

<style lang="less">
.lov {
  width: 100%;
  .lovtop {
    width: 100%;
    height: 40px;
    background: #ee534f;
    box-sizing: border-box;
    position: relative;
    img {
      width: 30px;
      height: 30px;
      display: inline-block;
      position: absolute;
      top: 4px;
      left: 5px;
    }
    span {
      position: absolute;
      color: white;
      top: 7px;
      left: 40%;
    }
  }
}
.lovcentr {
  width: 100%;
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 70px;
      box-sizing: border-box;
      display: flex;
      padding: 10px;
      .lovcentron {
        width: 50%;
        height: 100%;
        padding-left: 5px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        box-sizing: border-box;
        border-bottom: 2px solid #ee534f;
        border-left: 2px solid #ee534f;
        border-top: 2px solid #ee534f;
        display: flex;
        justify-content: end;
        align-items: center;
        span {
          color: gray;
        }
        span:nth-child(1) {
          font-size: 18px;
          margin-right: 5px;
        }
        span:nth-child(2) {
          margin-top: 5px;
        }
      }
      .lovcentrto {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding-right: 5px;
        border-top: 2px solid #ee534f;
        // border-right: 2px solid #ee534f;
        // border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        img {
          width: 35px;
          height: 35px;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>